<template>
  <div id="root">
    <div
      id="wrap"
      :class="['wrap', !ispc ? 'noScorll' : '']"
      :style="{ height: screenHeight + 'px', 'min-width': '1180px' }"
    >
      <new-root>
        <div class="sc-giImIA fuuQtJ">
          <headerNav  active="1"  />
          <!--contain  内容部分-->
          <div id="main" :style="{ top: nowTop + 'px' }">
            <!-- 第一部分 swiper -->
            <div id="page1" class="page swiper mySwiper" >
              <div class="swiper-wrapper">
                <div class="swiper-slide bg1">
                  <div class="absolute-box">
                    <div  class="ab-dec">精益求精</div>
                    <div  class="ab-dec indent-2">敢于创新</div>
                  </div>
                  <img src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646060397866-958d7696-8ef2-420e.jpg" />
                </div>
                <div class="swiper-slide bg2">
                  <img src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646060745783-c66bc4f2-2a3f-4fe1.jpg" />
                </div>
                <div class="swiper-slide bg3">
                   <img src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646060791172-9a1c4b99-becd-4a7d.jpg" />

                </div>
              </div>
            </div>

            <!-- 第二部分 -->
            <div id="page2" :class="['page', curIndex == 2 ? 'fadeInLeftBig':'' ] ">
              <div
                class="
                  title
                  js-build-in
                  build-in-scale-fade
                  build-in-animate
                "
                style="transform: translate(0px, 0px)"
              >
                <header class="sc-fKFxtB iJPhgZ">
                  <h1>
                    <strong>为什么使用<br /></strong>智能润滑集群
                  </h1>
                  <p>
                    实时故障检测和警报，提升资产的利用率和可用性，提高产品质量并降低维护成本。
                  </p>
                </header>
              </div>

              <div class="features_cards-wrap">
                <div
                  class="
                    sc-eggMyH
                    cMGsGD
                    features_card
                    feature-team
                    js-build-in
                    build-in-scale-fade build-in-animate
                  "
                >
                  <div class="left">
                    <div class="left_mid">
                      <h2>适用行业</h2>
                      <div class="content-wrap">
                        <div class="left_mid_content left_mid_content-show">
                          <p class="feature-team_subtitle">
                            矿山、能源、石化、冶金
                          </p>
                          <p class="feature-team_des">
                           帮助电机轴承、齿轮箱、提升机、泵、水轮机等解决传统润滑易造成过度润滑或润滑不足的问题。
                          
                           帮助企业安全生产、高效管理提供保障，让企业没有难管的设备。

                          </p>
                        </div>
                      </div>
                      <div class="feature-tab-wrap">
                        <div
                          class="
                            sc-iBaQBe
                            iUNHXL 
                            team-tab-active
                            feature-tab-wrap_tab-item
                          "
                        >
                          <div class="feature-tab-wrapper">
                            <div class="feature-tab-icon">
                              <img
                                src=""
                                width="30"
                                height="30"
                                class="width-full height-full"
                              />
                            </div>
                            <span class="tab-text">查看详情</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div
                      class="card_cover-wrap"
                      style="transform: translate(0px, 0px); opacity: 1"
                    >
                     
                      <div class="_34ZCy card_cover-show card_cover"  style="margin-top:-180px;">

                        <img    width="700" src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646059472884-c95bfb89-ac9b-4974.png" />
                        
                      </div>
                     
                    
                    </div>
                  </div>
                </div>
                 
              </div>
            </div>


            <div id="page3" :class="['page', curIndex == 3 ? 'fadeInLeftBig':'' ] ">
              <div
                class="
                  title
                  js-build-in
                  build-in-scale-fade
                  build-in-animate
                "
                style="transform: translate(0px, 0px)"
              >
                <header class="sc-fKFxtB iJPhgZ">
                  <h1>
                    <strong>什么是<br /></strong>预测性维护系统？
                  </h1>
                  <p>
                    基于物联网传感器和大数据，对故障进行预测性维护管理，优化设备的利用率
                  </p>
                </header>
              </div>

              <div class="features_cards-wrap">
                <div
                  class="
                    sc-eggMyH
                    cMGsGD
                    features_card
                    feature-team
                    js-build-in
                    build-in-scale-fade build-in-animate
                  "
                >
                  <div class="left">
                    <div class="left_mid">
                      <h2>工业维护三个阶段</h2>
                      <div class="content-wrap">
                        <div class="left_mid_content left_mid_content-show">
                          <p class="feature-team_subtitle">
                            修复性维护                           
                          </p>
                          <p class="feature-team_des_1">非计划停机，造成经济损失 </p>
                           <p class="feature-team_subtitle">
                            预防性维护                          
                          </p>
                          <p class="feature-team_des_1">周期性安排人员保养维护，突发故障无法预测 </p>

                         <p class="feature-team_subtitle">
                            预测性维护                          
                          </p>
                          <p class="feature-team_des_1">基于物联网传感器，利用人工智能、模式识别与复杂的数据挖掘技术来判定某一设备何时状态不佳或可能发生故障。
                            
                          </p>
                          
                        </div>
                      </div>
                      <div class="feature-tab-wrap">
                        <div
                          class="
                            sc-iBaQBe
                            iUNHXL
                            _34ZCy
                            team-tab-active
                            feature-tab-wrap_tab-item
                          "
                        >
                          <div class="feature-tab-wrapper">
                            <div class="feature-tab-icon">
                              <img
                                src=""
                                width="30"
                                height="30"
                                class="width-full height-full"
                              />
                            </div>
                            <span class="tab-text">查看详情</span>
                          </div>
                        </div>
                      </div>
                    </div>
                   
                  </div>
                  <div class="right">
                    <div
                      class="card_cover-wrap"
                      style="transform: translate(0px, 0px); opacity: 1"
                    >
                      <div class="_34ZCy card_cover-show card_cover" style="margin-top:-180px;">
                        <img  width="700" src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646058258163-b2df0e32-26a4-4990.png" />
                      </div>
                    
                    </div>
                  </div>
                </div>
                 
              </div>
            </div>

            <!-- 第三部分 end  -->
            <div id="page5" :class="['page padding_top_50', curIndex == 5 ? 'fadeInLeftBig':'' ] " >

              <div
                class="
                  title
                  js-build-in
                  build-in-scale-fade
                  build-in-animate
                "
                style="transform: translate(0px, 0px)"
              >
                <header class="sc-fKFxtB iJPhgZ">
                  <h1 style="text-align:center;padding-bottom:80px">
                    <strong>产品</strong>介绍
                  </h1>
                  
                </header>
              </div>

              <div class="aduce-box">
                <div class="aduce-item">
                  <img src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646060085277-8a64ec03-421b-4e5a.png"  alt="">
                  <div class="aduce-name">智能润滑集群</div>
                  <div class="aduce-dec">
                   6v锂电池供电,油杯容量有150ml和250ml两种规格,用户可根据设备运行工况自行设置多久加完油杯的润滑剂
                  </div>
                </div>

                <div class="aduce-item">
                  <img src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646061005375-0bcb1bc6-add1-4074.png" class="aduce-img" alt="">
                  <div class="aduce-name">基站网关</div>
                  <div class="aduce-dec">
                    POE供电，支持高并发，无线可视通信距离>1.5km
                  </div>
                </div>

                <div class="aduce-item">
                   <img src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20220228/1646061133251-5adf9d65-7dfd-4a56.png" class="aduce-img" alt="">
                  <div class="aduce-name">边缘盒</div>
                  <div class="aduce-dec">
                    接收多达64路传感器采集的数据并初步处理，将数据通过无线发往中央网关。
                    供电：3.6v，36000mAh防爆锂电或5v DC
                    无线：NFC+2.4G+BLE5.2+lora
                    通信距离： 大于200m(视距)

                  </div>
                </div>
              </div>
            </div>

            <!-- 合作商家 -->
            <div id="page6" :class="['page about-box', curIndex == 6 ? 'fadeInLeftBig':'' ] ">
              <div class="w1280 mobile_100 index_logo_li">
                <h3 class="title_news">PARTNERS</h3>
                <p class="title_newText">来自200+购物中心的信赖 排名不分先后 部分客户</p>
                <div class="partners_box mobile_partners_box">
                <ul class="fn_clear">
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_01.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_02.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_03.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_04.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_05.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_06.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_07.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_08.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_09.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_10.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_11.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_12.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_13.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_14.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_15.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_16.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_17.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_18.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_19.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_20.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_21.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_22.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_23.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_24.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_25.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_26.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_27.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_28.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_29.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_30.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_31.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_32.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_33.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_34.png" alt=""></a></li>
                    <li><a href="javascript:void(0);"><img src="http://www.woxshare.com/images/partners/partners_35.png" alt=""></a></li>
                </ul>
                </div>
                <!-- <div class="partners_more"><a href="case.html">更多客户</a></div> -->
              </div>
            </div>



            <div id="page7" :class="['page about-box bg4', curIndex == 7 ? 'fadeInLeftBig':'' ] ">
              <div class="contentflur mapBox">
                <div class="contributeWayText">联系我们</div>
                <div class="underLine" />
                <div class="mapImgBox comflex">
                  <div class="mapImg">
                    <baidu-map
                      id="map1"
                      :scroll-wheel-zoom="true"
                      :center="location"
                      :zoom="zoom"
                      class="bmView"
                    >
                      <bm-marker :position="location" />
                    </baidu-map>
                  </div>
                  <div class="mapText">
                    <div class="cityBox">{{ mapObj.companyName }}</div>
                    <div class="weizhi">
                      <img :src="daohang" class="daohangimg" alt="" />
                      <span>{{ mapObj.address }}</span>
                    </div>
                    <div class="weizhi top20">
                      <span class="iconfont icondianhua" />
                      <span>{{ mapObj.csTelephone }}</span>
                    </div>
                    <div class="weizhi top20">
                      <span class="iconfont iconyoujian" />
                      <span>{{ mapObj.email }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="bottom-box"> 
                <span style="color:#fff">Copyright © 2020 易享智联科技有限公司 未经许可不得复制、转载或摘编，违者必究</span>
                <a
                  href="https://beian.miit.gov.cn/#/Integrated/index"
                  target="_blank"
                  style="margin-left: 12px;">粤CIP备2020075217号</a>

              </div>
            </div>
          </div>
        </div>
      </new-root>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css";
import headerNav from '@/components/headerNav'
export default {
  name: "home",
  components: {
    headerNav
  },
  data() {
    return {
      ispc:'',
      curIndex:'',
      screenWeight: 0, // 屏幕宽度
      screenHeight: 0, // 屏幕高度
      index: 1, // 用于判断翻页
      curIndex: 1, // 当前页的index
      startTime: 0, // 翻屏起始时间
      endTime: 0, // 上一次翻屏结束时间
      nowTop: 0, // 翻屏后top的位置
      pageNum: 0, // 一共有多少页
      main: Object,
      obj: Object,
      wrap:Object,
      location: {
        lng: 114.113546,
        lat: 22.563841
      }, 
      daohang: require("@/assets/index/daohang.png"),
      zoom: 16,
      mapObj:{
        companyName:'易享智联',
        address:'广东省深圳市',
        csTelephone:'0711-0525',
        email:'yxzl@.136.com'
      },
      
    };
  },
  mounted() {
    var mySwiper = new Swiper("#page1", {
        loop:true
    });
    
    setInterval(()=>{
      mySwiper.slideNext();
    },8000)
    this.ispc = this.IsPC(); 
    this.screenWeight = document.documentElement.clientWidth;
    this.screenHeight = document.documentElement.clientHeight;
    this.main = document.getElementById("main");
    window.addEventListener("resize", this.watchWindowSize);
    // if (this.ispc &&  this.screenHeight  > 1750) {
    //   this.pageNum = document.querySelectorAll(".page").length;
    //   // 浏览器兼容
    //   if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
    //     document.addEventListener("DOMMouseScroll", this.scrollFun, false);
    //   } else if (document.addEventListener) {
    //     document.addEventListener("mousewheel", this.scrollFun, false);
    //   } else if (document.attachEvent) {
    //     document.attachEvent("onmousewheel", this.scrollFun);
    //   } else {
    //     document.onmousewheel = this.scrollFun;
    //   }
    // }else{
      // this.wrap = document.getElementById("wrap");
      // this.wrap.style.overflow = "scroll" 
    // }

  },
  created() {},
  filters: {},
  methods: {
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },

    // 点击下拉
    down() {
      if (this.index == this.pageNum) {
        return;
      }
      // 向下滚动
      this.index++;
      this.toPage(this.index);
    },
    contribution() {
      // 投稿 验证是否登录
      // if(!sessionStorage.hz_userInfo||!JSON.parse(sessionStorage.hz_userInfo).jwt){
      //     return this.dialogVisible = true
      // }
      // util.openNewWidow(this,"Contribution")
      this.$refs.header.contribution();
    },
    concatUs() {
      this.$refs.header.concatUs();
    },

    goIndex(index) {
      this.index = index;
      this.toPage(this.index);
    },
    watchWindowSize(e){
      console.log('窗口大小发生了改变')
    },
    scrollFun(event) {
      this.startTime = new Date().getTime();
      // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
      // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是正值说明滚轮是向下滚动
      let delta = event.detail || -event.wheelDelta;
      // 如果当前滚动开始时间和上次滚动结束时间的差值小于.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
      if (this.startTime - this.endTime > 500) {
        if (
          delta > 0 &&
          parseInt(this.main.offsetTop) >=
            -(this.screenHeight * (this.pageNum - 2))
        ) {
          if (this.index == this.pageNum) {
            return;
          }
          // 向下滚动
          this.index++;
          this.toPage(this.index);
        } else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
          // 向上滚动
          this.index--;
          if(this.index<=0){
            return
          }
          this.toPage(this.index);
        }
        // 本次翻页结束，记录结束时间，用于下次判断
        this.endTime = new Date().getTime();
      }
    },
    // 翻页
    toPage(index) {
      if (index != this.curIndex) {
        let delta = index - this.curIndex;
        this.nowTop = this.nowTop - delta * this.screenHeight;
        this.index = index;
        this.curIndex = index;
      }
    },
  },
};
</script> 
<style lang="less" >
body,
html {
  /* background: #313541; */
  background: #2e2f33;
}
.aduce-box{
  width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .aduce-item{
    width: 360px;
    border-radius: 10px;
    box-shadow: var(--shadow-3);
    overflow: hidden;
    img{
      width: 100%;
      height: 340px;
      background: #ccc;

    }
    .aduce-name{
      padding-left: 20px;
      font-size: 20px;
      line-height: 40px;
      font-weight: 600;
    }
    .aduce-dec{
      padding: 0 20px;
      color: #666;
      line-height: 28px;
      height: 180px;
      word-break: break-all;
    }
  }
}
.absolute-box{
  position: absolute;
  top: 20%;
  left: 15%;
  color: #fff;
  font-weight: bold;
  font-size: 60px;
  letter-spacing: 4px;
}
.about-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fadeInLeftBig{
  animation-name: fadeInOut;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}
@keyframes fadeInOut {
    0% {
        opacity:0;
    }
   
    100% {
        opacity:1;
    }
}
.page {
  box-sizing: border-box;
  // transform:scale(.7);
}
.about_Img {
  width: 100%;
  /* height: 100%; */
}
html,
body {
  height: 100%;
}

body,
ul,
li,
a,
p,
div {
  /*慎删*/
  padding: 0px;
  margin: 0px;
}

.wrap {
  width: 100%;
}
.noScorll {
  overflow: auto;
}
.button_box {
  position: absolute;
  z-index: 3;
  display: flex;
  bottom: 170px;
  left: 27%;
}
.btn {
  margin-right: 50px;
  background: rgba(100, 6, 25, 0.8);
  font-size: 20px;
  color: #fff;
  padding: 12px;
  width: 150px;
  letter-spacing: 4px;
  border-radius: 8px;
}
.btn:hover {
  background: rgb(100, 6, 25);
  color: #fff;
}
#page4{
    padding-top: 200px;
}
.partners_box li img {
    display: block;
    width: 130px;
    margin: 0 auto;
}
#main {
  position: relative;
  transition: top 0.5s;
}
.pageUlLi {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 1px 1px #ccc;
  cursor: pointer;
}

.page {
  width: 100%;
  height: 100vh !important;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.index_logo_li {
    margin: 80px auto 0;
}
.w1280 {
    width: 1280px;
    margin: 0 auto;
}
.title_news {
    font-family: PingFangSC-Semibold;
    font-size: 32px;
    color: #27262F;
    letter-spacing: 20px;
}

.title_news, .title_newText {
    width: 100%;
    text-align: center;
}
.title_news::before {
    content: "";
    display: inline-block;
    margin-right: 20px;
    width: 12px;
    height: 12px;
    vertical-align: 5px;
    border-radius: 50%;
    background-color: #FFBB0F;
}
.title_newText {
    margin: 20px 0 60px;
    line-height: 14px;
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    letter-spacing: 2px;
    color: #2D2C35;
    opacity: 0.5;
}
.title_news, .title_newText {
    width: 100%;
    text-align: center;
}
.partners_box {
    padding: 0 10px;
}
.fn_clear:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
#pageUl {
  position: fixed;
  right: 10px;
  bottom: 50%;
}

.pageUlLi.active {
  background: #b2083d;
}
.slider_box {
  position: fixed;
  bottom: 30px;
  text-align: center;
  display: flex;
  width: 100%;
  justify-content: center;
}
.learnMore {
  text-align: center;
  cursor: pointer;
  color: #808080;
}
#page2,#page3,#page4{
    padding: 100px 20px 0;
    width: 100vw;
    max-width: var(--view-1);
    margin:  0 auto ;

} 
#page2 .features_cards-wrap,#page3 .features_cards-wrap, #page4 .features_cards-wrap{
    width: 100%;
    padding: 0px 48px;
}

#page2 .features_card,#page3 .features_card ,#page4 .features_card{
    padding: 4rem;
    border-radius: var(--radius-24);
    box-shadow: var(--shadow-3);
}
.khhLaF {
    padding: var(--spacing-8) var(--spacing-20);
    background: transparent;
    border-radius: var(--radius-full);
    border: 2px solid var(--black-700);
    transition: var(--transition-easeOut-2);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font: var(--button-3);
    width: 50%;
}
.cMGsGD {
    position: relative;
    margin-top: var(--spacing-page-mid-120);
    width: 100%;
    max-height: 50vh;
    height: 100vh;
    min-height: 46.85rem;
    background-color: var(--white);
    display: flex;
    overflow: hidden;
    padding: 0px !important;
}
.cMGsGD .left {
    width: 45%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 4.57rem;
}
.cMGsGD .left_mid {
    margin: var(--spacing-8) 0 var(--spacing-page-mid) 0;
}
#page2 .features_card h2,#page3 .features_card h2 ,#page4 .features_card h2  { 
    color: rgb(0, 157, 255);
    font-weight: 600;
    opacity: 1 !important;
}
.cMGsGD .left_mid .content-wrap {
    position: relative;
    width: 100%;
    height: 270px;
}
.cMGsGD .left h2 {
    color: var(--black-900);
    opacity: 0.6;
    margin-bottom: var(--spacing-8);
}
.cMGsGD .left_mid .left_mid_content {
    position: absolute;
    transition: var(--transition-easeOut-2);
}
.cMGsGD .left_mid .feature-team_subtitle {
    font: var(--Heading-2);
    max-width: 76%;
    margin-top: 10px;
}
.cMGsGD .left_mid .feature-team_des {
    font: var(--Paragraph-1-400);
    opacity: 0.7;
    max-width: 85%;
    margin-top: 20px;
}
.cMGsGD .left_mid .feature-tab-wrap {
    display: flex;
    margin-top: 70px;
}
.cMGsGD .left_mid .feature-tab-wrap_tab-item:not(:last-child) {
    margin-right: 6px;
}
.iUNHXL.team-tab-active {
    background: var(--button-blue-1);
    border-radius: 1000px;
    width: 125px !important;
    margin: 0px !important;
}
.iUNHXL {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    transition: var(--transition-easeOut-2);
}
.iUNHXL.team-tab-active .feature-tab-wrapper {
    padding: var(--spacing-base) var(--spacing-12) !important;
}
.iUNHXL .feature-tab-wrapper {
    position: absolute;
    left: 0px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: var(--spacing-base) var(--spacing-8);
}
.iUNHXL .feature-tab-wrapper .feature-tab-icon {
    width: 28px;
    height: 28px;
    opacity: 0.5;
    transition: var(--transition-easeOut-1);
}
.iUNHXL.team-tab-active .tab-text {
    opacity: 1 !important;
    transform: translateX(0px) !important;
    color: white !important;
}
.iUNHXL .tab-text {
   
    font-weight: 500;
    word-break: keep-all;
    margin-left: 4px;
    opacity: 0;
    transform: translateX(-8px);
    transition: var(--transition-easeOut-2);
}
.cMGsGD .left_mid .feature-tab-wrap_tab-item:not(:last-child) {
    margin-right: 6px;
}
.iUNHXL {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    transition: var(--transition-easeOut-2);
}
.iUNHXL.team-tab-active .feature-tab-icon {
    filter: invert(1);
    opacity: 1 !important;
}
.white {
  color: #fff;
}
.iUNHXL .feature-tab-wrapper {
    position: absolute;
    left: 0px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: var(--spacing-base) var(--spacing-8);
}
.learn_more_text {
  animation: fadeInDown 2s infinite;
  font-size: 20px;
  font-family: SourceHanSansCN-Medium;
}
.contentflur {
  width: 1200px;
  margin: auto;
}
.icondianhua {
  margin-right: 8px;
  color: #1296db;
  font-size: 16px;
}
.daohangimg {
  margin-right: 8px;
}
.top20 {
  margin-top: 15px;
}
.iconyoujian {
  margin-right: 8px;
  color: #d4237a;
  font-size: 16px;
}
.iUNHXL .tab-text {
   
    font-weight: 500;
    word-break: keep-all;
    margin-left: 4px;
    opacity: 0;
    transform: translateX(-8px);
    transition: var(--transition-easeOut-2);
}
 .khhLaF i {
    width: 12px;
    height: 12px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    transition: var(--transition-easeOut-2);
    margin-left: var(--spacing-12);
}
.cMGsGD .right {
    width: 60%;
    height: 100%;
    position: absolute;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    right: 0px;
    bottom: 0px;
    background: url(https://img.js.design/assets/Resources/background/home-bg-2.png) center top / 165% no-repeat fixed;
    overflow: hidden;
}
.cMGsGD .right .card_cover-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.cMGsGD .right .card_cover {
    opacity: 0;
    width: 86%;
    position: absolute;
    border: 1px solid rgba(52, 59, 69, 0.14);
    box-shadow: rgb(8 23 69 / 21%) 0px 8px 16px;
    overflow: hidden;
    border-radius: var(--radius-12);
    transform: scale3d(0.9, 0.9, 0.9);
    transition: var(--transition-easeOutBack-1);
}
.cMGsGD .right .card_cover-show {
    opacity: 1 !important;
    transform: scale3d(1, 1, 1) !important;
}

.cMGsGD .right .card_cover video {
    display: flex;
}
.comflex {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.contributeBox {
  margin-top: 48px;
}
.contributeWayText {
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  color: rgba(32, 32, 32, 1);
  line-height: 47px;
}
.underLine {
  width: 48px;
  height: 4px;
  margin: 8px auto 40px;
  background: rgba(216, 65, 45, 1);
  border-radius: 3px;
}
.contributeWay {
  padding: 32px 117px;
  box-shadow: 0px 12px 33px 0px rgba(238, 238, 238, 1);
  justify-content: space-around;
  color: #5d687a;
  line-height: 48px;
  background: #ffffff;
}
.lineData {
  position: relative;
}
.lineData::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 18px;
  width: 4px;
  height: 12px;
  background: rgba(68, 136, 255, 1);
  border-radius: 2px;
}
.recruitBox,
.mapBox {
  margin-top: 80px;
}
.roleBox {
  justify-content: space-around;
}
.role {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(216, 216, 216, 1);
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  cursor: pointer;
  transition: background ease-out 0.6s, color ease-in 0.4s;
}
.role:hover {
  background: #d8412d;
  color: #fff;
}
.transform {
  background: #d8412d;
}
.roleBox .active {
  color: #fff;
  background-color: #d8412d;
}
.roleInfo {
  margin-top: 48px;
  padding: 40px 40px 40px 120px;
  box-sizing: border-box;
  box-shadow: 0px 2px 57px 0px rgba(218, 218, 218, 0.5);
  background: #fff;
}
.roleName {
  padding-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  border-bottom: 1px solid #c7d9ff;
}
.roleInfoText {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 32px;
}
.mapImg {
  position: relative;
}
.mapImg .dingwei {
  position: absolute;
  bottom: 11%;
  right: 28%;
}
.mapImg .dingwei > img {
  width: 30px;
}

.mapImg #map1 {
  width: 693px;
  max-width: 100%;
  height: 450px;
}
.mapBox {
  margin-bottom: 80px;
}
.mapImgBox {
  justify-content: space-between;
}
.mapText {
  flex:1;
  margin-left: 30px;
  padding: 24px 24px 42px;
  background: rgba(247, 249, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(138, 190, 255, 1);
}
.weizhi > img {
  width: 14px;
}
.cityBox {
  font-size: 26px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  line-height: 1;
  border-bottom: 1px solid #d4e7ff;
}
.no-padding {
  padding: 0;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.padding_top_150{
  padding-top: 250px;
}
.down_click {
  width: 16px;
  height: 16px;
  margin: 12px auto 0;
  border: solid #808080;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.white_border {
  border-color: #fff;
}
.down_click:hover {
  border-color: #b2083d;
}
body.wap,
html.wap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  position: fixed;
}

body > #root {
  z-index: 9999999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.indent-2{
  text-indent: 2em;
  margin-top: 20px;
}
#root > .main {
  /* 千万不要去掉 */
  opacity: 0;
}
#page2 header ,#page3 header,#page4 header{
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
#page2 header h1,#page3 header h1,#page4 header h1,
#page2 header p,#page3 header p,#page4 header p {
  text-align: center;
}
.iJPhgZ h1 strong {
  color: rgb(157, 164, 175);
}
#page2 header p ,#page3 header p,#page4 header p{
  max-width: 505px;
}
.iJPhgZ p {
  font: var(--Heading-3-400);
  max-width: 450px;
  opacity: 0.7;
}
#page2 header h1 ,#page3 header h1,#page4 header h1{
  display: flex;
}
#wrap{
    background: rgb(243, 247, 251);
}
.iJPhgZ h1 {
  font: var(--Heading-0);
  color: var(--black-900);
  margin-bottom: var(--spacing-20);
}
.padding_top_50{
  padding-top: 150px;
}
/* 新的loading */
.loading-panel {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.iUNHXL .feature-tab-wrapper .feature-tab-icon {
    width: 28px;
    height: 28px;
    opacity: 0.5;
    transition: var(--transition-easeOut-1);
}

.loading-panel .loading-logo {
  position: fixed;
  opacity: 0.3;
  width: 200px;
  transform: scale(1.2);
  animation: breath 3.2s ease-in-out infinite;
}

@keyframes breath {
  50% {
    opacity: 0.65;
  }
}

.loading-panel .loading {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(243, 247, 251, 1);
}
._3rYEP {
  opacity: 1;
}
._3_bh1 {
  transform: rotateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: none;
}
._1bd3p {
  padding: 8px 14px;
}
.DA-DyC {
  z-index: 99999999;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 88px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease-in 0s;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(250%) blur(14px) brightness(100%);
}
.fuuQtJ {
  background: rgb(255, 255, 255);
  padding-top: 0.1px;
  overflow-x: hidden;
  margin-top: 0px;
}
.bTbGHf {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
.bTbGHf main {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  background: rgba(247, 250, 253, 0);
  width: 100%;
}
.DA-DyC > div {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;

  -webkit-box-align: center;
  align-items: center;
  position: relative;
}
.DA-DyC .center {
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  justify-content: center;
  flex: 1 1 0%;
}
.DA-DyC .center .navbarItem:not(:last-child) {
  margin-right: var(--spacing-8);
}
.DA-DyC .center .navbarItem:not(:last-child) {
  margin-right: var(--spacing-8);
}
.DA-DyC .right {
  display: flex;
  z-index: 1;
}

.bTbGHf {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
.bTbGHf main {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  background: rgba(247, 250, 253, 0);
  width: 100%;
}
.DA-DyC .right div[data-type="button"]:not(:last-child) {
  margin-right: var(--spacing-8);
}
.DA-DyC .right {
  display: flex;
  z-index: 1;
}
.ihtIES .header-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding: var(--spacing-page-mid) 0;
  background: url(https://img.js.design/assets/Resources/background/help-bg-1.png)
    0% 0% / cover no-repeat fixed;
  background-repeat: no-repeat;
}
.ihtIES .children-wrap {
  position: relative;
  width: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin-top: 64px;
}
.gVvAzI.search-results {
  opacity: 0;
  visibility: hidden;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-5);
  position: absolute;
  top: 80px;
  z-index: 222;
  transition: var(--transition-easeOut-2);
  transform: translateY(-10px);
  width: 640px;
  max-height: 400px;
  overflow-y: auto;
}
.csnZdA > header .header_input-wrap {
  width: 100%;
  max-width: 640px;
  height: 60px;
  padding: 16px;
  box-shadow: var(--shadow-3);
  border-radius: var(--radius-12);
  background-color: var(--white);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.ihtIES .header-title h1 {
  z-index: 1;
  font: var(--Heading-0);
  margin-bottom: var(--spacing-20);
}
.ihtIES .header-title p {
  font: var(--Heading-3-400);
  opacity: 0.8;
  text-align: center;
}
.ihtIES .header-title {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
.ihtIES i {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-18);
  background-color: var(--white);
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 40px;
}
.csnZdA > header i {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-18);
  background-color: var(--white);
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 40px;
}
.csnZdA {
  width: 100vw;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
}
.csnZdA > header {
  position: relative;
  z-index: 99;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  transform: translate3d(0px, 0px, 0px);
}
.bottom-box {
  background: #333333; 
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .title {
    height: 16px;
    line-height: 16px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
  }
  a{
    color: #11b2ff;
  }
}
.eMyrNo {
  box-sizing: border-box;
  text-align: center;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  left: auto;
  margin-top: 0px;
  font: var(--button-2);
  color: var(--black-900);
  padding: 10px var(--spacing-20);
  background: var(--white);
  border-radius: var(--radius-8);
  transition: var(--transition-easeOut-2);
  box-shadow: var(--shadow-2);
  width: auto;
  user-select: none;
}
.eMyrNo:hover {
  color: var(--black-900);
  box-shadow: rgb(0 0 0 / 11%) 0px 6px 8px 0px, rgb(0 0 0 / 5%) 0px 0px 0px 1px;
}
.igbXLM .primary-button {
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  box-sizing: border-box;
  color: var(--white);
  padding: 10px var(--spacing-20);
  background: var(--button-blue-1);
  border-radius: var(--radius-8);
  transition: var(--transition-easeOut-3);
  box-shadow: var(--shadow-2);
  word-break: keep-all;
  font: var(--button-2);
}
.gOlpXr {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: var(--black-50);
  padding: 0 0 var(--spacing-page-lg) 0;
}
.gblOIc {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 0 var(--spacing-page-mid) 0;
  transition: var(--transition-easeOut-2);
  background-color: var(--black-50);
}
.haIodf {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--white);
  color: var(--white);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px 82%;
}
.hero-section-bg {
  border-radius: var(--radius-24);
  width: 100%;
  height: 100%;
  background: url(https://img.js.design/assets/Resources/background/home-bg-2.png)
    0% 0% / cover no-repeat;
  background-repeat: no-repeat;
}
.partners_box li {
    float: left;
    width: 180px;
    padding: 35px 0;
    text-align: center;
}
ul li {
    list-style: none;
}
.fTGMSM .card_banner {
  width: 226px;
  height: 104px;
  border-radius: var(--radius-8);
  overflow: hidden;
  margin-bottom: 28px;
  transition: var(--transition-easeOut-2);
}
.fTGMSM .card_bottom .list_wrap {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
new-root * {
  box-sizing: border-box;
}
* {
  margin: 0px;
  padding: 0px;
}
.fTGMSM .card_bottom .list_wrap .roleListItem {
  width: 67px;
  height: 64px;
  padding: 8px 0px;
  border-radius: var(--radius-8);
  transition: var(--transition-easeOut-2);
}
.fTGMSM .card_bottom .list_wrap .roleListItem i {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: var(--transition-easeOutBack-1);
}
.fTGMSM .card_bottom .list_wrap .roleListItem {
  width: 67px;
  height: 64px;
  padding: 8px 0px;
  border-radius: var(--radius-8);
  transition: var(--transition-easeOut-2);
}
._34ZCy,
div[data-type="button"],
span[data-type="button"] {
  user-select: none;
}
.fTGMSM .card_bottom .list_wrap .roleListItem .roleItem .character {
  line-height: 12px;
  font-size: 12px;
}
new-root a,
new-root abbr,
new-root acronym,
new-root address,
new-root applet,
new-root article,
new-root aside,
new-root audio,
new-root b,
new-root big,
new-root blockquote,
new-root body,
new-root canvas,
new-root caption,
new-root center,
new-root cite,
new-root code,
new-root dd,
new-root del,
new-root details,
new-root dfn,
new-root div,
new-root dl,
new-root dt,
new-root em,
new-root embed,
new-root fieldset,
new-root figcaption,
new-root figure,
new-root footer,
new-root form,
new-root h1,
new-root h2,
new-root h3,
new-root h4,
new-root h5,
new-root h6,
new-root header,
new-root hgroup,
new-root html,
new-root i,
new-root iframe,
new-root img,
new-root ins,
new-root kbd,
new-root label,
new-root legend,
new-root li,
new-root mark,
new-root menu,
new-root nav,
new-root object,
new-root ol,
new-root output,
new-root p,
new-root pre,
new-root q,
new-root ruby,
new-root s,
new-root samp,
new-root section,
new-root small,
new-root span,
new-root strike,
new-root strong,
new-root sub,
new-root summary,
new-root sup,
new-root table,
new-root tbody,
new-root td,
new-root tfoot,
new-root th,
new-root thead,
new-root time,
new-root tr,
new-root tt,
new-root u,
new-root ul,
new-root var,
new-root video {
  vertical-align: baseline;
  margin: 0px;
  padding: 0px;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
  font: inherit;
}
.fTGMSM .card_bottom {
  color: rgba(36, 48, 66, 0.7);
}
.jDZBgb h1 {
  font-size: 13px;
  line-height: 13px;
  color: rgba(36, 48, 66, 0.7);
  margin-bottom: 12px;
}
#page2>.title{
    width: 100%;
}
.dYlaav {
  width: 231px;
  height: 191px;
  border-radius: var(--radius-8);
  box-shadow: rgb(220 222 230 / 70%) 0px 0px 0px 1px;
  overflow: hidden;
  transition: var(--transition-easeOut-2);
}
.dYlaav .issue-card_content .facsimile-info p {
  line-height: 18px;
  font-size: 12px !important;
  color: rgba(39, 51, 71, 0.6) !important;
}
.gSAaoj span p {
  opacity: 0.8;
  font-size: 14px;
}
.dYlaav .issue-card_content .facsimile-info .process0 {
  transform: scale(0.8);
}
.gSAaoj .states .process0::before {
  position: absolute;
  background: rgb(68, 217, 75);
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  border-radius: 50%;
  backface-visibility: hidden;
  animation: 4s ease-out 0s infinite normal none running wave-animate;
}
.dYlaav .issue-card_cover {
  height: 123px;
}
._34ZCy,
a,
div[data-type="button"],
span[data-type="button"] {
  cursor: -webkit-image-set(url() 2x, url() 1x) 9 9, auto !important;
}
.dYlaav {
  width: 231px;
  height: 191px;
  border-radius: var(--radius-8);
  box-shadow: rgb(220 222 230 / 70%) 0px 0px 0px 1px;
  overflow: hidden;
  transition: var(--transition-easeOut-2);
}
._34ZCy,
div[data-type="button"],
span[data-type="button"] {
  user-select: none;
}
.dYlaav .issue-card_cover .cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gSAaoj .states .process0::after {
  position: absolute;
  background: rgb(68, 217, 75);
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  border-radius: 50%;
  backface-visibility: hidden;
  opacity: 0;
  animation: 4s ease-out 1.5s infinite normal none running wave-animate;
}
.gSAaoj .states .process0 {
  position: relative;
  background: rgb(68, 217, 75);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  backface-visibility: hidden;
}
new-root p {
  line-height: 1.5;
}
.dYlaav .issue-card_content .facsimile-info {
  width: 159px;
}
.dYlaav .issue-card_content .facsimile-info span {
  margin: 0px 8px 0px 0px;
}
.gSAaoj span:not(:last-child) {
  margin-right: var(--spacing-12);
}
.gSAaoj span {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: end;
  justify-content: flex-end;
  font: var(--Paragraph-16);
}
.gSAaoj {
  display: flex;
}
.dYlaav .issue-card_cover .cover-img {
  width: 100%;
  overflow: hidden;
  transition: var(--transition-easeOut-2);
}
.dYlaav .issue-card_content {
  width: 100%;
  padding: var(--spacing-12);
}
.dYlaav .issue-card_content .content_title {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 8px;
}
.fTGMSM .card_bottom h6 {
  font-size: 13px;
  line-height: 13px;
  margin-bottom: 8px;
}
.fTGMSM .card_bottom .list_wrap .roleListItem .roleItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
._34ZCy,
a,
div[data-type="button"],
span[data-type="button"] {
  cursor: -webkit-image-set(url() 2x, url() 1x) 9 9, auto !important;
}
.fTGMSM .card_banner img {
  width: 100%;
  object-fit: cover;
}
._14zM1 {
  display: block;
}
.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  text-align: center;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg1 {
  background-image: linear-gradient(348deg, #27039f, #4258bc, #439bd8, #00e1f3);
}
.bg2 {
  background-image: linear-gradient(25deg, #c51f21, #bb5f67, #9b8ab0, #11b2ff);
}
.bg3 {
  background-image: linear-gradient(25deg, #dd5d66, #da9067, #d2bc68, #c3e666);
}
.bg4 {
  background-image: linear-gradient(25deg, #618cd6, #71a7ce, #7cc2c5, #83debb);
}

.feature-team_des_1{
  font: var(--Paragraph-1-400);
    opacity: 0.7;
    max-width: 85%;
    margin-top: 5px;
}
</style>